<template>
  <div class="main_box">
    <CommonHeader title="选择联系人"></CommonHeader>
    <div class="nav_wrap">
      <div class="left">
        <div class="tit" style="width: 86px">一级选项：</div>
        <div class="content" style="width: 110px" @click="showOneSelect">
          <div style="max-width: 80px">{{ selectOne }}</div>
          <i class="down"></i>
        </div>
      </div>
      <div class="right">
        <div class="tit" style="width: 70px">二级选项：</div>
        <div class="content" @click="showTwoSelect">
          <div>{{ selectTwo }}</div>
          <i class="down"></i>
        </div>
      </div>
    </div>
    <div class="main_content">
      <div class="person_item" v-for="person in personList" :key="person.id" @click="selectPerson(person)">
        <i class="icon" :class="isActive(person.id)"></i>
        <div class="img">{{ formateName(person.name) }}</div>
        <!-- <div class="name">{{ person.positionName }}：</div> -->
        <div class="name">{{ person.name + ' ' + person.positionName }}</div>
      </div>
      <div class="btn_box">
        <van-button round type="info" @click="confirm">确 认</van-button>
      </div>
    </div>
    <van-popup v-model="oneShow" round position="bottom" get-container="#app">
      <van-picker show-toolbar :columns="oneList" value-key="deptName" confirm-button-text="确定" cancel-button-text="取消" @confirm="confirmOne" @cancel="cancelOne" />
    </van-popup>
    <van-popup v-model="twoShow" round position="bottom" get-container="#app">
      <van-picker show-toolbar :columns="twoList" value-key="deptName" confirm-button-text="确定" cancel-button-text="取消" @confirm="confirmTwo" @cancel="cancelTwo" />
    </van-popup>
  </div>
</template>

<script>
import CommonHeader from '@/components/commonHeader';
export default {
  // eslint-disable-next-line
  name: 'PersonList',
  components: {
    CommonHeader,
  },
  data() {
    return {
      selectOne: '',
      selectOneId: '',
      oneShow: false,
      oneList: [],
      selectTwo: '',
      selectTwoId: '',
      twoShow: false,
      twoList: [],
      personList: [
        {
          id: 1,
          name: '杨胜杰',
          phone: '18888888888',
        },
        {
          id: 2,
          name: '白洪楞',
          phone: '18888888888',
        },
        {
          id: 3,
          name: '张崇波',
          phone: '18888888888',
        },
      ],
      selectList: [],
    };
  },
  computed: {
    formateName() {
      return function (name) {
        if (name && name.length > 0) {
          return name.slice(0, 1);
        } else {
          return '无';
        }
      };
    },
    isActive() {
      return function (id) {
        const filterArr = this.selectList.filter((item) => {
          return item.id === id;
        });
        if (filterArr.length > 0) {
          return 'active';
        } else {
          return '';
        }
      };
    },
  },
  watch: {
    selectTwoId() {
      this.getPersonList();
    },
  },
  created() {
    const query = this.$route.query;
    this.selectList = JSON.parse(query.persons) || [];
    this.getOneDeptList();
  },
  methods: {
    getPersonList() {
      this.$api.deptPersonList({ deptId: this.selectTwoId }).then((res) => {
        if (res.status === 200) {
          console.log(res.data);
          this.personList = res.data;
        }
      });
    },
    getOneDeptList(parentId = '') {
      this.$api.deptList({ parentId }).then((res) => {
        if (res.status === 200) {
          this.oneList = res.data;
          if (this.oneList.length) {
            this.selectOne = res.data[0].deptName;
            this.selectOneId = res.data[0].id;
          }
          console.log(this.oneList, '一级');
          this.getTwoDeptList();
        }
      });
    },
    getTwoDeptList() {
      this.$api.deptList({ parentId: this.selectOneId }).then((res) => {
        if (res.status === 200) {
          this.twoList = res.data;
          if (this.twoList.length) {
            this.selectTwo = res.data[0].deptName;
            this.selectTwoId = res.data[0].id;
          }
          console.log(this.twoList, '二级');
        }
      });
    },
    confirmOne(item) {
      this.selectOne = item.deptName;
      this.selectOneId = item.id;
      this.oneShow = false;
      this.getTwoDeptList();
    },
    cancelOne() {
      this.oneShow = false;
    },
    confirmTwo(item) {
      this.selectTwo = item.deptName;
      this.selectTwoId = item.id;
      this.twoShow = false;
    },
    cancelTwo() {
      this.twoShow = false;
    },
    showOneSelect() {
      this.oneShow = true;
    },
    showTwoSelect() {
      this.twoShow = true;
    },
    selectPerson(person) {
      let filterArr = [];
      let index = 0;
      for (let i in this.selectList) {
        const item = this.selectList[i];
        if (person.id === item.id) {
          index = i;
          filterArr.push(item);
        }
      }
      if (filterArr.length === 1) {
        this.selectList.splice(index, 1);
      } else {
        this.selectList.push(person);
      }
    },
    confirm() {
      sessionStorage.setItem('persons', JSON.stringify(this.selectList));
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.main_box {
  min-height: 100vh;
  background-color: #f4f5fa;
}
.main_content {
  width: 100%;
  margin-top: 15px;
  margin-bottom: 80px;
  box-sizing: border-box;
  background-color: #fff;
}
.person_item {
  display: flex;
  height: 45px;
  line-height: 44px;
  padding: 0 15px;
  border-bottom: 1px solid #efefef;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}
.person_item * {
  cursor: pointer;
}
.person_item .icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('../../assets/image/checkbox_icon1.png') no-repeat;
  background-size: 100% 100%;
  margin-right: 10px;
  position: relative;
  top: 12px;
}
.person_item .icon.active {
  background: url('../../assets/image/checkbox_icon2.png') no-repeat;
  background-size: 100% 100%;
}
.person_item .img {
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 50%;
  background-color: #3d64ed;
  color: #fff;
  margin-right: 15px;
  position: relative;
  top: 8px;
}
.person_item:nth-child(5n + 1) .img {
  background-color: #ff4601;
}
.person_item:nth-child(5n + 2) .img {
  background-color: #ed3da3;
}
.person_item:nth-child(5n + 3) .img {
  background-color: #871df0;
}
.person_item:nth-child(5n + 4) .img {
  background-color: #27c95d;
}
.btn_box >>> .van-button {
  width: 90%;
  position: fixed;
  bottom: 10px;
  left: 5%;
}

.nav_wrap {
  width: 100%;
  display: flex;
  margin-top: 10px;
  margin-bottom: 15px;
}
.nav_wrap > div {
  display: flex;
}
.nav_wrap .tit {
  font-size: 13px;
  color: #999;
}
.nav_wrap .content {
  width: 94px;
  font-size: 13px;
  color: #333;
  display: flex;
  line-height: 18px;
}
.nav_wrap .content .down {
  width: 15px;
  height: 8px;
  background: url('../../assets/image/down.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  left: 10px;
  top: 5px;
}
</style>